<template>
  <div>
    <h2>{{ msg }}</h2>
    <input type="text" v-model.number="count" />
    <span>count:{{ count }}</span>
    <input type="text" v-model.trim="user" />
    <span>user:{{ user }}</span>
  </div>
</template>

<script>
export default {
  name: "LifeCycle",
  components: {},
  props: {
    msg: String,
  },
  data() {
    return {
      count: 0,
      user: "",
    };
  },
  computed: {},
  watch: {
    /* 
        watch 监听 data 中的数值，要监听的数值只要变化，就执行watch
        在本例中：
        1. 监听了 count ，所以count发生变化会执行 watch
        2. 没有监听 user，所以 user 发生变化也不会执行 watch
      */
    count(newvalue) {
      console.log("watch:", newvalue);
    },
  },
  methods: {},
  beforeCreate() {},
  created() {
    /* 可以在这里发起网络请求去请求数据 */
  },
  beforeMount() {},
  mounted() {
    /* 可以在这里开始操作DOM元素 */
  },
  beforeUpdate() {},
  updated() {
    /* 
        template中绑定的值变化了就会触发 updated
        在本例中：
        1. count 改变会触发 update
        2. user 改变也会触发 update
      */
    console.log("update");
  },
  activated() {},
  beforeUnmount() {},
  unmounted() {},
};
</script>
<style scoped></style>
